<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/inputnumber.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>Document</title>
</head>

<body>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- table -->
    <div class="main">
      <table>
        <!-- 头部 -->
        <thead>
          <tr>
            <th>名字</th>
            <th>图片</th>
            <th>单价</th>
            <th>个数</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 身体 -->
        <tbody>
          <tr v-for="(item,index) in list">
            <td>
              <input type="checkbox" v-model="item.isChecked" />
              {{ item.name }}
            </td>
            <td>
              <img :src="`./img/${item.name}.png`" alt="" />
            </td>
            <td>6</td>
            <td>
              <div class="my-input-number">
                <!-- 递减 -->
                <span role="button" class="my-input-number__decrease" @click="sub(index)">
                  -
                </span>
                <!-- 累加 -->
                <span role="button" @click="item.num++" class="my-input-number__increase">
                  +
                </span>
                <div class="my-input">
                  <!-- 数字显示区域 -->
                  <span class="my-input__inner">{{ item.num }}</span>
                </div>
              </div>
            </td>
            <td>{{ item.num*item.price }}</td>
            <td>
              <button @click="list.splice(index,1)">删除</button>
            </td>
          </tr>
        </tbody>
        <!-- 空车 -->
      </table>
      <div class="bottom">
        <!-- 全选 -->

        <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥<span class="price">{{totalPrice}}</span></span>
        <button class="pay">结算({{totalCount}})</button>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [{
            name: '火龙果',
            isChecked: true,
            num: 2,
            price: 6,
          },
          {
            name: '荔枝',
            isChecked: false,
            num: 7,
            price: 20,
          },
          {
            name: '榴莲',
            isChecked: false,
            num: 3,
            price: 40,
          },
          {
            name: '鸭梨',
            isChecked: true,
            num: 10,
            price: 3,
          },
          {
            name: '樱桃',
            isChecked: false,
            num: 20,
            price: 34,
          },
        ],
      },
      methods: {
        sub(index) {
          if (this.list[index].num === 1) {
            this.list.splice(index, 1)
          }
          this.list[index].num--
        },
      },
      computed: {
        totalPrice() {
          let _totalPrice = 0
          this.list
            .filter((v) => {
              return v.isChecked === true
            })
            .forEach((v) => {
              _totalPrice += v.num * v.price
            })
          return _totalPrice
        },
        totalCount() {
          let _totalCount = 0
          this.list
            .filter((v) => {
              return v.isChecked === true
            })
            .forEach((v) => {
              _totalCount += v.num
            })
          return _totalCount
        },
      },
    })
  </script>
</body>

</html>